---
id: toggle
title: Toggle
description: A two-state button that can be toggled on or off.
---

<ComponentPreview id="Toggle" />

## Examples

Here's a basic example of how to use the `Toggle` component:

<Example id="basic" />

### Controlled

Use the `pressed` and `onPressedChange` props to control the toggle's state.

<Example id="controlled" />

### Disabled

Use the `disabled` prop to disable the toggle.

<Example id="disabled" />

### Indicator

Use the `Toggle.Indicator` component to render different indicators based on the state of the toggle.

<Example id="indicator" />

## API Reference

### Props

<ComponentTypes id="toggle" />

### Context

These are the properties available when using `Toggle.Context`, `useToggleContext` hook or `useToggle` hook.

<ContextType id="toggle" />
